<template>
    <div class="home">
        <div class="row_line">
            <div style="width: 60%;margin-right: 10px">
                <el-carousel height="300px" style="border-radius: 15px">
                    <el-carousel-item v-for="(item,i) in first" :key="i" style="background: #42b983;border-radius: 15px">
                        <img :src="item" alt="" style="width: 100%">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div style="width: 40%">
                <el-carousel indicator-position="none" :interval="4000" type="card" height="300px"
                             style="border-radius: 15px">
                    <el-carousel-item v-for="(item,i) in second" :key="i" style="background: #304455;border-radius: 15px">
                        <img :src="item" alt="" style="height: 100%">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <el-divider/>
        <div class="flex row align-center space-around" style="margin-top: 20px;width: 100%">
            <a href="#day" class="type_card "
               style="background-image: linear-gradient(to right, #845EC2,#2C73D2)">每日推荐</a>
            <a href="#hot" class="type_card"
               style="background-image: linear-gradient(to right, #845EC2,#D65DB1)">热门资源</a>
            <a href="#blog" class="type_card"
               style="background-image: linear-gradient(to right, #845EC2,#008E9B)">推荐博客</a>
            <a href="#web" class="type_card"
               style="background-image: linear-gradient(to right, #00C9A7,#C4FCEF)">实用网站</a>
        </div>
        <el-divider/>
        <!--        下面-->
        <div class="flex space-between row" style="width: 100%;">
            <div class="flex_center  column" style="width: 70%;margin-right: 10px">
                <h1 id="day">每日推荐</h1>
                <RecommendList/>
                <h1 id="hot">热门资源</h1>
                <ListCard/>
                <h1 id="blog">推荐博客</h1>
                <ListCard/>
                <h1 id="web">实用网站</h1>
                <WebList/>
            </div>
            <div class="flex column" style="width: 30%;height: 100%">
                <h1>工具区域</h1>
                <FeiyuCalendar/>
                <UserHot/>
                <TagHot/>
            </div>
        </div>


    </div>
</template>

<script>
import ListCard from "../components/ListCard.vue";
import WebLogo from "../components/WebLogo.vue";
import FeiyuCalendar from "../components/tool/FeiyuCalendar.vue";
import UserHot from "../components/tool/UserHot.vue";
import TagHot from "../components/tool/TagHot.vue";
import RecommendList from "../components/home/RecommendList.vue";
import WebList from "../components/website/WebList.vue";

export default {
    name: "Home",
    data(){
      return{
          first:[
              "/tmp/1.jpg",
              "/tmp/2.jpg",
              "/tmp/3.jpg",
          ],
          second:[
              "/tmp/4.jpg",
              "/tmp/5.jpg",
              "/tmp/6.jpg",
          ]
      }
    },
    components: {WebList, RecommendList, TagHot, UserHot, FeiyuCalendar, WebLogo, ListCard},
    methods: {
        isToday(param) {
            const today=new Date();
            return today.toDateString()===param.toDateString()
        }
    }
}
</script>

<style lang="scss" scoped>


a {
    text-decoration: none;
    color: black;
}

.type_card {
    width: 200px;
    height: 50px;
    border-radius: 30px;
    align-items: center;
    justify-content: center;
    display: flex;
    cursor: pointer;
    transition: all 0.4s ease 0s;
    box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.1);
}

.type_card:hover {
    transform: scale(1.1);
    transition: all 0.4s ease 0s;
}

.home {
    width: 65%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: white;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 50px 20px;
    border-radius: 15px;
}

.row_line {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.col_line_line {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


.budge {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    margin: 5px auto;
}

.red {
    background-color: #c9413f;
}

.green {
    background-color: #25b591;
}

.orange {
    background-color: #ee915c;
}

</style>
